<script setup lang="ts">
import {getCurrentInstance, onMounted, ref} from "vue";
import {showToast} from "vant";
import {useI18n} from "vue-i18n";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {auth, authInfo} from "@/api/userApi.ts";
import {uploadImg} from "@/api/uploadApi.ts";

const {t} = useI18n()
const {proxy} = getCurrentInstance();

const router = useRouter();
const store = useStore();

const fileList1 = ref([]);
const fileList2 = ref([]);

const form = ref({
  realName: '',
  idCard: '',
  zmImg: '',
  fmImg: ''
})

const beforeRead = (file: any) => {
  const validTypes = ['image/jpeg', 'image/jpg', 'image/png'];
  if (!validTypes.includes(file.type)) {
    showToast(t('placeholder.imgTypeError'));
    return false;
  }
  return true;
};

const beforeDelete = (file: any, type: any) => {
  if (type == 'zm') {
    form.value.zmImg = '';
  } else {
    form.value.fmImg = '';
  }
  return true;
};

// 文件选择后的上传处理
const afterRead = (file: any, type: any) => {
  // 创建一个 FormData 对象，将文件添加到 FormData 中
  const formData = new FormData();
  formData.append('file', file.file);

  uploadImg(formData).then(res => {
    if (type == 'zm') {
      form.value.zmImg = res.data;
    } else {
      form.value.fmImg = res.data;
    }
  })
}

const submit = () => {
  if (form.value.realName == '') {
    showToast(t('placeholder.realNameEmpty'));
    return false;
  }

  if (form.value.idCard == '') {
    showToast(t('placeholder.idCardEmpty'));
    return false;
  }

  if (form.value.zmImg == '') {
    showToast(t('placeholder.zmImgEmpty'));
    return false;
  }

  if (form.value.fmImg == '') {
    showToast(t('placeholder.fmImgEmpty'));
    return false;
  }

  store.state.loadingState = true;
  auth({
    real_name: form.value.realName,
    id_card: form.value.idCard,
    zm_img: form.value.zmImg,
    fm_img: form.value.fmImg
  }).then(res => {
    showToast(res.msg);
    store.state.loadingState = false;
    if (res.code == 0) {
      router.push({name: 'mine'})
    }
  })
}

const status = ref('');

const fetchAuthData = () => {
  authInfo().then(res => {
    if (res.data != null) {
      form.value.realName = res.data?.real_name;
      form.value.idCard = res.data?.id_card;
      form.value.zmImg = res.data?.zm_img;
      form.value.fmImg = res.data?.fm_img;
      status.value = res.data.status;


      if (form.value.zmImg != '') {
        fileList1.value.push({url: proxy.$baseURL + form.value.zmImg})
      }
      if (form.value.fmImg != '') {
        fileList2.value.push({url: proxy.$baseURL + form.value.fmImg})
      }
    }
  })
}

onMounted(() => {
  fetchAuthData();
})

</script>

<template>
  <div class="auth">

    <div v-if="status === 0" style="text-align: center;font-size: 20px;">
      <span>{{ $t('auth.checking') }}</span>
    </div>

    <div v-else-if="status === 1" style="text-align: center;font-size: 20px;">
      <span>{{ $t('auth.pass') }}</span>
    </div>

    <div v-else>
      <div class="form">
        <div class="field-item">
          <label>{{ $t('auth.realName') }}</label>
          <input type="text" :placeholder="$t('placeholder.realNameEmpty')" v-model="form.realName"/>
        </div>
        <div class="field-item">
          <label>{{ $t('auth.idCard') }}</label>
          <input type="text" :placeholder="$t('placeholder.idCardEmpty')" v-model="form.idCard"/>
        </div>
        <div class="field-item-img">
          <label>{{ $t('auth.zmImg') }}</label>
          <van-uploader v-model="fileList1" multiple :max-count="1" :before-delete="(file) => beforeDelete(file, 'zm')"
                        :before-read="beforeRead" :after-read="(file) => afterRead(file, 'zm')"/>
        </div>
        <div class="field-item-img">
          <label>{{ $t('auth.fmImg') }}</label>
          <van-uploader v-model="fileList2" multiple :max-count="1" :before-delete="(file) => beforeDelete(file, 'fm')"
                        :before-read="beforeRead" :after-read="(file) => afterRead(file, 'fm')"/>
        </div>
      </div>

      <div class="btn" @click="submit()" v-if="status === '' || status === 2">
        <span>{{ $t('auth.btn') }}</span>
      </div>
    </div>

  </div>
</template>

<style scoped lang="less">
@import "../../less/auth.less";
</style>